<template>
    <div class="card-box">
        <v-dialog :show.sync="dialogVisible" width="50%" title="导出数据" @beforeClose = beforeClose >
            <div v-if="dialogVisible"  >
                <div class="card-title">请选择导出的字段名称</div>
                <div>
                    <el-input type="input" placeholder="搜索字段名称" v-model="searchVal" style="width: 300px;margin: 10px 15px;"></el-input>
                    <el-button size="medium" type="primary"   @click="initialization" style="float: right;margin-top: 10px;">重置</el-button>
                </div>
                <div>
                    <el-table
                        :data="tableData"
                        ref="exportTable"
                        @selection-change="selectFields"
                        size="small"
                        :header-cell-style="{'text-align':'center' }"
                        :row-style="{height:'35px'}"
                        :cell-style="{'text-align':'center', 'height':'22px'}"
                    >
                        <el-table-column type="selection" width="50" value="val"/>
                        <el-table-column label="序号" type="index" width="100" align="center"/>
                        <el-table-column  label="字段名称" prop="field"/>
                    </el-table>
                </div>
            </div>
            <div slot="foot">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" v-throttle="[commit]">保 存</el-button>
            </div>
        </v-dialog>
    </div>
</template>
<script>
    import {downloadPost} from "@/admin/api/common"
    import {downloadBlob} from "@/utils"
    import { createLogger } from 'vuex'
    export default {
        name: "client-export",
        props: {
            searchForm: {
                type: Object,
                default: () => ({})
            }
        },
        data(){
            return{
                tableData:[],
                dialogVisible:false,
                fields: [],
                saveFields: [],
                form:{},
                linkPerson: '',
                clientType:'',
                searchVal: '',
            }
        },
        computed: {
            lesseeData() {
                return [
                    {id: 0, field: "出租方名称",val:"lessor_name"},
                    {id: 1, field: "出租方类型",val:"lessor_type"},
                    {id: 2, field: "证件类型",val:"certificate_type"},
                    {id: 3, field: "证件号码",val:"certificate_num"},
            /*        {id: 4, field: "联系电话",val:"phone_num"},
                    {id: 5, field: "电子邮件",val:"email"},*/
                    {id: 6, field: "通讯地址",val:"address"},
               /*     {id: 7, field: "引进单位",val:"introduce_unit"},
                    {id: 8, field: "单位性质",val:"unit_nature"},
                    {id: 9, field: "工作单位",val:"work_unit"},
                    {id: 10, field: "固定电话",val:"telephone"},
                    {id: 11, field: "法人身份证号码",val:"legal_identity_card"},
                    {id: 12, field: "法人代表",val:"legal_person"},
                    {id: 13, field: "主营业务",val:"primary_business"},
                    {id: 14, field: "注册资金",val:"register_fund"},
                    {id: 15, field: "行业类别",val:"categroy_employment"},*/
                    {id: 16, field: "备注",val:"remarks"},
                    {id: 17, field: "所有联系人导出",val:"all_link_person"},
                ]
            }
        },
        watch: {
            searchVal(newValue, oldValue) {
                newValue !== oldValue && this.filterList()
            }
        },
        methods:{
            //重置搜索
            initialization(){
                this.searchVal = '';
            },
            //过滤列表
            filterList(){
                let saveFields = this.fields;
                if(!this.searchVal) {
                    this.show(this.clientType)
                } else {
                    this.tableData = this.tableData.filter(item => {
                        return item.field.indexOf(this.searchVal) > -1
                    })
                    let fields = saveFields.map(item => item.id)
                    this.$nextTick(() => {
                        this.tableData.forEach(row => {
                            if(fields.indexOf(row.id) >= 0){
                                this.$refs.exportTable.toggleRowSelection(row,true);
                            }
                        })
                    })
                }
                this.saveFields = saveFields
            },
            show(val){
                this.dialogVisible=true
                this.clientType=val;
                this.tableData = val=='provider' ? this.providerData : this.lesseeData
                let fields = this.saveFields.map(item => item.id)
                this.$nextTick(() => {
                    this.tableData.forEach(row => {
                        this.$refs.exportTable.toggleRowSelection(row,true);
                        if(fields.indexOf(row.id) >= 0){
                            this.$refs.exportTable.toggleRowSelection(row,true);
                        }
                    })
                })
            },
            selectFields(selectField){
                this.fields = selectField
            },
            closeDialog(){
                this.dialogVisible=false
            },
            beforeClose(done) {
                this.dialogVisible=false;
            },
            commit(){
            if(this.clientType=='provider'){
                    var time = new Date()
                    var clientProviderName = time.getFullYear()+'-'+(time.getMonth()+1)+ '-' +time.getDate()+ ' ' +time.getHours()+ ':' +time.getMinutes()+ ':' +time.getSeconds()+"供应商信息.xlsx"

                    var clientProviderUrl = '/api/clientprovider/clientprovider_recording_download'
                    this.form.fields=this.fields
                    downloadPost(clientProviderUrl,this.form).then(response=>{
                        downloadBlob(response.data,clientProviderName)
                    })
                    this.dialogVisible=false;
                }else {
                    var time = new Date()
                    var lessorName = time.getFullYear()+'-'+(time.getMonth()+1)+ '-' +time.getDate()+ ' ' +time.getHours()+ ':' +time.getMinutes()+ ':' +time.getSeconds()+"出租方信息.xlsx"

                    var clientLesseeUrl = '/api/lessormange/clientlessee_recording_download'
                    this.searchForm.fields=this.fields
                    console.log(this.searchForm,"searchForm")

                    downloadPost(clientLesseeUrl,this.searchForm).then(response=>{
                        downloadBlob(response.data,lessorName)
                    })

                    this.dialogVisible=false;
                }
            }
        }
    }
</script>

